<script setup>
import {ref, computed} from 'vue'

const {data} = defineProps({
  data: Object
})
const fields = computed(() => data.fieldsMeta.filter(it => it.visibleInForm))
const formModes = {'onecolumn': '一列', 'twocolumn': '两列', 'threecolumn': '三列'}

function addGroup() {
  data.viewGroups.push({})
}

function delViewGroup(v) {
  let i = data.viewGroups.indexOf(v)
  if (i > -1) {
    data.viewGroups.splice(i, 1)
  }
}
</script>

<template>
  <FiledGroup style="height: 100%;" hideNavBar>
    <Legend title="显示设置"/>
    <Form mode="threecolumn" :labelWidth="120">
      <FormItem label="表单标题" prop="title" required>
        <Input type="text" v-model="data.title"/>
      </FormItem>
      <FormItem label="显示模式" prop="formMode">
        <Select v-model="data.formMode" :datas="formModes" :deletable="false"/>
      </FormItem>
      <FormItem label="表单宽度" prop="formWidth">
        <Input type="number" v-model="data.formWidth"/>
      </FormItem>
      <FormItem label="字段标题宽度" prop="formWidth">
        <Input type="number" v-model="data.formLabelWidth"/>
      </FormItem>
      <FormItem label="字段标题对齐" prop="formWidth">
        <Input type="number" v-model="data.formLabelWidth"/>
      </FormItem>
    </Form>
    <Legend title="分组"/>
    <div style="position: relative">
      <Button text icon="jeicon-add" color="primary"
              style="position: absolute;z-index: 99;right: 10px;top:8px;" @click="addGroup">新增分组
      </Button>
      <Table :datas="data.viewGroups">
        <TableItem title="标题">
          <template #default="{data}">
            <Input type="text" v-model="data.k" style="width:100%"/>
          </template>
        </TableItem>
        <TableItem title="图标">
          <template #default="{data}">
            <IconSelect v-model="data.v"/>
          </template>
        </TableItem>
        <TableItem :width="80" title=" ">
          <template #default="{data}">
            <LinkButtons>
              <Button @click="delViewGroup(data)">删除</Button>
            </LinkButtons>
          </template>
        </TableItem>
      </Table>
    </div>
    <Legend title="字段信息"/>
    <Table :datas="fields">
      <TableItem title="字段名" prop="columnName" :width="220"></TableItem>
      <TableItem title="标题" :width="100" prop="title"></TableItem>
      <TableItem title="校验规则" :width="100"></TableItem>
      <TableItem title="控件" :width="100"></TableItem>
      <TableItem title="数据项"></TableItem>
      <TableItem title="格式化" :width="100"></TableItem>
      <TableItem title="单位" prop="memo"></TableItem>
      <TableItem title="分组" :width="100"></TableItem>
      <TableItem title="提示" prop="memo"></TableItem>
    </Table>
  </FiledGroup>
</template>

<style scoped>

</style>
